<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one {
				width: 200px;
				height: 200px;
			}
			
			.two {
				position: relative;
				left: -34px;
				width: 170px;
				height: 170px;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<span>齿轮得个数不对没找到合适得图</span>
			<img class="one" src="img/gear.jpg" />
			<img class="two" src="img/gear.jpg" />
		</div>
	</body>
	<script type="text/javascript" charset="utf-8">
		window.onload = function() {

			var oImg = document.getElementsByTagName("img");
			//时间(毫秒)
			var t = 100;
			//推得公式t2 = r2*t1/r1
			//转动公式
			var l = 0;
			var g = 0;

			function run(ele) {
				l++;
				ele.style.transform = `rotate(${l}deg)`;
			}

			function run2(ele) {
				g--;
				ele.style.transform = `rotate(${g}deg)`;
			}
			var R1 = getComputedStyle(oImg[0], null).width.split("px")[0] - 0;
			var R2 = getComputedStyle(oImg[1], null).width.split("px")[0] - 0;

			var T1 = t;
			var T2 = R2 * T1 / R1;
			//
			for(var i = 0; i < oImg.length; i++) {
				(function(index) {
					switch(index) {
						case 0:
							setInterval(function() {
								run(oImg[index]);
							}, T1);
							break;
						case 1:
							setInterval(function() {
								run2(oImg[index]);
							}, T2);
							break;
					}

				})(i)
			}
		}
	</script>

</html>